<template>
  <div>
    <div v-for='(i,index) in list'>
      <van-field v-for='j in i' :label='j.label' v-model='values[index+j.key]'/>
    </div>
    <van-button @click='add'>+</van-button>
    <van-button @click='submit'>提交</van-button>

  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [[{'label': '名称', 'key': 'name'}, {'label': '类型', 'key': 'type'}, {
        'label': '字段名',
        'key': 'field'
      }, {'label': 'checkbox,radio,select值', 'key': 'fvalue'}]],
      id: this.$route.query.id,
      values: {},
      number: 1
    }
  },
  methods: {
    //点击+号
    add() {
      this.number += 1
      this.list.push([{'label': '名称', 'key': 'name'}, {'label': '类型', 'key': 'type'}, {
        'label': '字段名',
        'key': 'field'
      }, {'label': 'checkbox,radio,select值', 'key': 'fvalue'}])
    },
    //提交表单
    submit() {
      var list = []
      for (var i = 0; i < this.number; i++) {
        var name = i + 'name'
        var type = i + 'type'
        var field = i + 'field'
        var fvalue = i + 'fvalue'
        var dict = {
          'name': this.values[name],
          'type': this.values[type],
          'field': this.values[field],
          'fvalue': this.values[fvalue]
        }
        list.push(dict)
      }

      //更新数据库操作
      this.axios.post('setparams', {'id': this.id, 'params': JSON.stringify(list)}).then(res => {
        console.log(res)
      })
    }
  },
}
</script>
<style>

</style>
